<template>
  <el-container>
    <el-aside class="photo">
      <img :src="shop.url" alt="" style="width: 100%; height: 99%;" />
    </el-aside>
    <el-main>
      <div class="data">
        <h1 class="name">{{ shop.name }}</h1>

        <p class="intro">
          {{ shop.description }}
        </p>

        <p class="store">{{ shop.merchant }}</p>
        <div class="price">
          <span>￥{{ shop.money[ind] }}元</span>
        </div>

        <el-card class="specifications" style="margin-top: 15px;">
          <button
            id="choice"
            style="background-color: #fff;"
            @click="dialogVisible = true"
          >
            <span style="font-size: 20px;">选择规格&nbsp; ></span>
          </button>
          <span class="choice">
            {{ choiced }}
          </span>
        </el-card>

        <div class="button">
          <a href="/joinShoppingCart">
            <el-button type="button" class="shop">
              <span>加入购物车</span>
            </el-button>
          </a>
          <a href="/collect">
            <el-button type="button" class="like">
              <span>收藏</span>
            </el-button>
          </a>
        </div>
        <div class="pro-policy">
          <ul>
            <li>
              <i class="el-icon-circle-check"></i>
              {{ shop.merchant }}
            </li>
            <li>
              <i class="el-icon-circle-check"></i>
              顺丰包邮
            </li>
            <li>
              <i class="el-icon-circle-check"></i>
              七天无理由退货
            </li>
            <li>
              <i class="el-icon-circle-check"></i>
              七天价格保修
            </li>
          </ul>
        </div>
      </div>
    </el-main>
    <!-- 规格模态框 -->
    <el-drawer
      :visible.sync="dialogVisible"
      :with-header="false"
      direction="btt"
      size="70%"
    >
      <div style="width: 220px;">
        <img :src="shop.url" alt="" style="width: 100px; height: 100px;" />
        <span class="mon">￥{{ shop.money[ind] }}</span>

        <div>
          <span
            style="margin-left: 20px;"
            v-for="(k, tt) in shop.specifications"
            :key="tt"
          >
            {{ Object.keys(k)[0] }}
            <el-radio-group
              style="margin-left: 20px; margin-top: 10px; margin-bottom: 10px;"
              v-model="radio[tt]"
              @change="choice"
            >
              <el-radio-button
                v-for="(specification, index) in Object.values(k)[0]"
                :key="index"
                :label="specification"
              >
                {{ specification }}
              </el-radio-button>
            </el-radio-group>
            <!-- <el-radio-group
              v-for="(i, index) in shop.specifications"
              :key="index"
              v-model="radio[index]"
            >
              <el-radio-button
                v-for="(specification, o, q) in Object.values(i)[0]"
                :key="q"
                :label="specification"
                style="margin-top: 10px;"
              >
                {{ specification }}
              </el-radio-button>
            </el-radio-group> -->
          </span>
        </div>
      </div>
    </el-drawer>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      ind: 0,
      radio: ['ppp', 'ooo'],
      choiced: '',
      shop: {
        id: 1,
        url:
          'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
        merchant: '华麦基汉堡店',
        name: '老八秘制蟹黄堡',
        description: '老八秘制蟹黄堡，既实惠又管饱，来点小鸟伏特加。',
        specifications: [
          { 主食: ['老八秘制蟹黄堡', '老八秘制人肉卷'] },
          { 小食: ['惊喜老八大薯条', '老八情侣虾'] },
          { 饮料: ['小鸟伏特加', '老猫尿'] },
        ],
        time: Date.now(),
        money: [4646, 8888],
      },
      dialogVisible: false,
    }
  },
  methods: {
    tocollect() {
      this.$router.push('collect')
    },
    findMoney(index) {
      console.log(index)
      // this.ind = index
      // this.ind2 = index
    },
    choice() {
      this.choiced = []
      document.getElementsByClassName('is-active').forEach((element) => {
        this.choiced.push(element.innerText)
      })
      var str = this.choiced.join('+')
      this.choiced = str
      console.log(this.choiced)
      // console.log(specification)
    },
  },
}
</script>
<style>
.el-container {
  min-height: 40vw !important;
}
.el-main {
  margin: 10px !important;
}

.photo {
  width: 450px !important;
  height: 490px;
  margin-left: 70px;
  margin-top: 10px;
  float: left;
}
/* 详情资料 */
.data {
  float: left;
  margin-left: 50px;
  width: 640px !important;
}
.name {
  height: 30px;
  line-height: 30px;
  font-size: 24px;
  font-weight: 400;
  color: #212121;
}
.intro {
  color: #b0b0b0;
  padding-top: 10px;
}
.store {
  color: #ff6700;
  padding-top: 10px;
}
.price {
  display: block;
  font-size: 18px;
  color: #ff6700;
  border-bottom: 1px solid #e0e0e0;
  padding: 25px 0 25px;
}

.price-sum {
  color: #ff6700;
  font-size: 24px;
  padding-top: 20px;
}
.button {
  height: 55px;
  margin: 10px 0 20px 0;
}
.button .el-button {
  float: left;
  height: 55px;
  font-size: 16px;
  color: #fff;
  border: none;
  text-align: center;
}
.button .shop {
  width: 340px;
  background-color: #ff6700;
}
.button .shop:hover {
  background-color: #f25807;
}
.button .like {
  width: 260px;
  margin-left: 40px;
  background-color: #b0b0b0;
}
.button .like:hover {
  background-color: #757575;
}
.pro-policy li {
  float: left;
  margin-right: 20px;
  color: #b0b0b0;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: black;
}
.choice {
  margin-left: 50px;
}

.el-drawer img {
  margin: 20px;
  margin-bottom: 40px;
}
.mon {
  font-size: 18px;
  color: #ff6700;
  margin-top: 20px;
  float: right;
}
.specification {
  margin-top: 60px;
  margin-left: 15px;
}
.el-drawer .el-button {
  font-size: 15px;
  margin-top: 10px;
  margin-bottom: 15px;
  margin-left: 15px;
  border: 1px solid rgb(156, 156, 255);
}
.el-drawer .el-button:focus,
.el-drawer .el-button:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}
.el-radio-group {
  width: 520px !important;
}
</style>
